<template>
  <div>
    
    <!-- 顶部滑动条区域 -->
    <div id="slider" class="mui-slider">
      <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-scroll-wrapper">
          <div class="mui-scroll"> 
             <a @click = "getimgcategory(item.id)" class="mui-control-item" href="#item1mobile" data-wid = "tab-top-subpage-1.html" v-for="item in categorylist" :key = "item.id" >{{item.title}}</a>
          </div>
      </div>
    </div>


    <!-- 图片列表区域 -->
    <ul>
        <li><img :src="item.img_url" v-for="item in piclist" :key = "item.id"></li>
    </ul>
  </div>
</template>

<script>
//引入

export default {
  name: "Pic",
  data(){
      return{
        categorylist:[],
        //   id:this.$route.params.id
        piclist:[],
        message:1
      }
  },
  created(){
      this.getAllcategory()
      this.getimgcategory()
  },
  mounted(){
        this.message = 2
        console.log(this.message)
      },
  methods:{
      getAllcategory(){
          this.$axios({
              method:"get",
              url:"http://www.liulongbin.top:3005/api/getimgcategory"
          }).then((res)=>{
              // console.log(res.data.message)
              this.categorylist = res.data.message
          })
      },
      getimgcategory(cateid){
          this.$axios({
              method:"get",
              url:"http://www.liulongbin.top:3005/api/getimages/"+cateid
          }).then((res)=>{
            //   console.log(res.data)
               this.piclist = res.data.message
            //    console.log(this.piclist)
          })
      }
  }
};
</script>
<style scoped>

#slider a{
    font-size: .28rem;
    color: #000;
}
.mui-segmented-control{
    border:0;
    border-bottom:1px solid #ccc;  
}
</style>
